<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
    <style type="text/css">
    </style>
</head>
<body>
    <canvas id="myCanvas1" width="300" height="300"></canvas>
    <canvas id="myCanvas2" width="200" height="300"></canvas>
    <canvas id="myCanvas3" width="200" height="300"></canvas>
    <canvas id="myCanvas4" width="200" height="300"></canvas>
    <canvas id="myCanvas5" width="200" height="300"></canvas>
    <script type="text/javascript">

//矩形
var c1 = document.getElementById("myCanvas1");
var cxt1 = c1.getContext("2d");
cxt1.fillStyle="rgb(200,0,0)";
cxt1.fillRect(0,0,80,75);
cxt1.fillStyle="rgba(0,0,200,0.5)";
cxt1.fillRect(30,30,80,75);

cxt1.fillStyle="rgba(0,100,200,0.5)";
cxt1.fillRect(120,120,100,100);
cxt1.clearRect(145,145,50,50);
cxt1.strokeRect(155,155,30,30);

//三角形
cxt1.beginPath();
cxt1.moveTo(200,50);
cxt1.lineTo(250,75);
cxt1.lineTo(250,25);
cxt1.fill();




//折线
var c2 = document.getElementById("myCanvas2");
var cxt2 = c2.getContext("2d");
cxt2.moveTo(10,10);
cxt2.lineTo(150,50);
cxt2.lineTo(10,50);
cxt2.stroke();   //stroke 用于按照已有的路径绘制线条。

//圆
var c3 = document.getElementById("myCanvas3");
var cxt3 = c3.getContext("2d");
cxt3.fillStyle = "#cbe";
cxt3.beginPath();
cxt3.arc(70, 50, 30, 0, Math.PI*2, true);
cxt3.closePath();
cxt3.fill();

//渐变色的矩形
var c4 = document.getElementById("myCanvas4");
var cxt4 = c4.getContext("2d");
var grd = cxt4.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#ff0000") ;
grd.addColorStop(1,"#00ff00");
cxt4.fillStyle=grd;
cxt4.fillRect(0,0,175,50);

//一个笑脸
var c5 = document.getElementById("myCanvas5");
var ctx = c5.getContext("2d");
ctx.beginPath(); 
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle 
ctx.moveTo(110,75); 
ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise) 
ctx.moveTo(65,65); 
ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye 
ctx.moveTo(95,65); 
ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye 
ctx.stroke();  
//thegoneheart 完整例子  
ctx.moveTo(40,75); 
ctx.lineTo(60,65); 
ctx.lineTo(90,65); 
ctx.moveTo(110,75); 
ctx.lineTo(125,75); 
ctx.stroke();





   </script>
</body>
</html>